<template>
  <div class="container">
    <div class="top">
      <div class="inp-box">
        <input
          type="text"
          placeholder="请输入劵码"
          class="code-inp"
          maxlength="30"
          v-model.trim="ticket_code"
        />
      </div>
      <div class="btn" @click="chec_code()">确定</div>
    </div>
    <div class="form" v-if="mark">
      <div class="section hospital">
        <div class="form-item">
          <div class="left">医院</div>
          <div class="right">
            ：
            <input type="text" class="inp" v-model="hos_name" disabled />
          </div>
        </div>
        <div class="form-item">
          <div class="left">项目</div>
          <div class="right">
            ：
            <input type="text" class="inp" placeholder v-model="pro_name" />
          </div>
        </div>

        <div class="form-item" @click="showDatePicker">
          <div class="left" v-if="!pt_mark">预约时间</div>
          <div class="right" v-if="!pt_mark">
            ：
            <input type="text" class="inp" placeholder v-model="operation_time" disabled />
          </div>
        </div>
      </div>
      <div class="section user">
        <div class="form-item">
          <div class="left">姓名</div>
          <div class="right">
            ：
            <input type="text" class="inp" v-model="realname" disabled />
          </div>
        </div>
        <div class="form-item">
          <div class="left">手机号</div>
          <div class="right">
            ：
            <input type="tel" class="inp" placeholder v-model="user_tel" maxlength="11" disabled />
          </div>
        </div>
        <div class="form-item">
          <div class="left left1">线上已支付</div>
          <div class="right">
            ：
            <input type="tel" class="inp" placeholder v-model="deposit" disabled />
          </div>
        </div>
        <div class="form-item">
          <div class="left left1">到院需支付</div>
          <div class="right right1">
            ：
            <input
              type="tel"
              class="inp moneyinp"
              placeholder
              v-model="unpaidAmount"
              minlength="1"
            />
          </div>
        </div>
      </div>
      <div class="sub-btn" @click="sub_form()">完成核销</div>
    </div>
  </div>
</template>

<script>
import { Toast, MessageBox } from "mint-ui";
import  api from '../../assets/js/apiPt'
let timer;
export default {
  data() {
    return {
      hos_id: "",
      hos_name: "",
      pro_id: "",
      pro_name: "",
      doc_id: "",
      doc_name: "",
      ticket_code: "", // 券码
      tc_id: "",
      operation_time: "",
      realname: "",
      user_tel: "",
      user_check: "",
      pt_mark: false,
      deposit: 0, //已支付
      money: "", //到院需支付
      mark: false,
      orderId: "",
      unpaidAmount: ""
    };
  },
  methods: {
    chec_code() {
      if (!this.ticket_code) {
        Toast({
          message: "请输入券码",
          position: "bottom",
          duration: 1500
        });
      } else {
        this.axios
          .post(
            "/api/com.mmk.groupservice.api.AdminGroupOrderProvider/1.0.0/getOrderInfo.html ",
            {
              verifyCode: this.ticket_code,
              orderId: this.orderId
            }
          )
          .then(result => {
            let res = result.data;
            console.log(res);
            this.hos_name = "";
            this.pro_id = "";
            this.pro_name = "";
            this.user_tel = "";
            this.doc_name = "";
            this.operation_time = "";
            this.realname = "";
            this.deposit = "";
            this.unpaidAmount = "";
            // console.log(this.realname)
            if (res.code == 0) {
              this.mark = true;
              this.hos_name = res.data.hospitalName;
              this.pro_name = res.data.projectName;
              this.operation_time = res.data.appointmentDate;
              this.realname = res.data.userName;
              this.user_tel = res.data.userPhone;
              this.deposit = res.data.payAmount;
              this.money = res.data.leftAmount;
              this.unpaidAmount = res.data.unpaidAmount;
              // this.hos_id = res.data
              // console.log(res.data);
              Toast({
                message: res.msg,
                position: "bottom",
                duration: 1500
              });
            }
          })
          .catch(err => {
            Toast({
              message: err.msg,
              position: "bottom",
              duration: 1500
            });
          });
      }
    },

    showDatePicker() {
      this.$createDatePicker({
        title: "请选择预约时间",
        min: new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDate(),
          0,
          0,
          0
        ),
        max: new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDate(),
          23,
          59,
          59
        ),
        value: new Date(),
        columnCount: 6,
        onSelect: this.selectHandle,
        onCancel: this.cancelHandle
      }).show();
    },
    selectHandle(date, selectedVal, selectedText) {
      let arr = selectedText;
      this.operation_time = `${arr[3]}:${arr[4]}:${arr[5]}`;
    },
    sub_form() {
      this.$createDialog({
        type: "confirm",
        icon: "",
        title: "核销成功！",
        content: "该用户是否升单？",
        confirmBtn: {
          text: "升单",
          active: true,
          disabled: false,
          href: "javascript:;"
        },
        cancelBtn: {
          text: "不升单",
          active: false,
          disabled: false,
          href: "javascript:;"
        },
        onConfirm: () => {
          this.$router.push({
            path: "/pt_sdan",
            query: {
              hospital: this.hos_name,
              hos_id: this.hos_id,
              orderId: this.orderId,
              isClosed:0
            }
          });
        },
        onCancel: () => {
          //核销完不升单
          this.axios
            .post(
              "/api/com.mmk.groupservice.api.AdminGroupOrderProvider/1.0.0/unUpgradeGroupOrderButler.html",
              { id: this.orderId.toString() }
            )
            .then(res => {
              // console.log(res)
              if (res.data.code == 0) {
                Toast({
                  message: res.data.msg,
                  position: "bottom",
                  duration: 1500
                });
                setTimeout(() => {
                  this.$router.go(-2);
                }, 1500);
              } else {
                Toast({
                  message: res.data.msg,
                  position: "bottom",
                  duration: 1500
                });
              }
            });
        }
      }).show();
    }
  },
  created() {
    this.axios.defaults.baseURL = api
    this.orderId = decodeURI(location.hash.split("=")[1]).split("&")[0];
    this.hos_id = location.hash.split("&")[1].split("=")[1];
    // console.log(this.hos_id);
    // this.deposit = location.hash.split("&")[1].split("=")[1]
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  background-color: #fff;
  position: relative;
  .top {
    margin-top: 25px;
    padding: 0 15px;
    display: flex;
    .inp-box {
      flex: 1;
      height: 40px;
      .code-inp {
        height: 100%;
        width: 100%;
        border-radius: 4px;
        line-height: 40px;
        padding-left: 10px;
        border: 1px solid rgba(238, 238, 238, 1);
        color: #444444;
        &::placeholder {
          color: rgba(136, 136, 136, 1);
        }
      }
    }
    .btn {
      width: 58px;
      height: 40px;
      margin-left: 7px;
      background: rgba(255, 131, 166, 1);
      border-radius: 4px;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      text-align: center;
    }
  }
  .form {
    width: 100%;
    padding: 0 15px;
    margin-top: 15px;
    position: absolute;
    top: 80px;
    .section {
      position: relative;
      .title {
        height: 20px;
        font-size: 14px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        line-height: 20px;
        margin-bottom: 10px;
        .icon {
          width: 4px;
          height: 10px;
          background: rgba(255, 131, 166, 1);
          border-radius: 2px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
      .form-item {
        height: 30px;
        width: 100%;
        display: flex;
        margin-bottom: 15px;
        border-bottom: 1px solid rgba(204, 204, 204, 0.2999);
        .left {
          width: 60px;
          text-align: justify;
          text-align-last: justify;
          font-size: 14px;
          line-height: 30px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgb(172, 171, 171);
        }
        .left1 {
          width: auto;
        }
        .right {
          flex: 1;
          line-height: 30px;
          display: flex;
          position: relative;
          .inp {
            height: 30px;
            line-height: 30px;
            flex: 1;
            background-color: transparent;
            color: #888;
            font-size: 14px;
            &::placeholder {
              font-size: 14px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(136, 136, 136, 1);
            }
          }
          .moneyinp {
            color: #fc538c;
          }
          .cube-select {
            width: 100%;
            opacity: 0;
            position: absolute;
            z-index: 10;
          }
          .get-msg {
            padding: 0 14px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 16px;
            border: 1px solid rgba(255, 131, 166, 1);
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 131, 166, 1);
            position: absolute;
            bottom: 5px;
            right: 0;
            z-index: 20;
          }
        }
      }
    }
    .sub-btn {
      width: 280px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background: linear-gradient(
        180deg,
        rgba(255, 221, 221, 1) 0%,
        rgba(255, 131, 166, 1) 100%
      );
      border-radius: 24px;
      font-size: 20px;
      font-family: "PingFangSC-Medium";
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      margin: 44px auto 100px;
    }
  }
}
</style>
<style lang="less">
.mint-msgbox-btn {
  border-radius: 0;
  background: #fff;
  color: #666;
}
.mint-msgbox-confirm {
  color: #ff383e;
}
.mint-msgbox-message {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}
.mint-msgbox {
  width: 72%;
  height: auto;
}
</style>